<template>
  <!-- 导航按钮 -->
  <scroll-view class="scroll-view" scroll-x="true">
    <view class="category">
      <navigator
        class="category-item"
        hover-class="none"
        v-for="item in list"
        :key="item.id"
        :open-type="item.pageStatus"
        :url="item.route"
      >
        <view class="imageItem">
          <image class="image" :src="item.icon"> </image>
        </view>
        <Text class="text">{{ item.title }}</Text>
      </navigator>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { CategoryItem } from '@/types/index/home'
defineProps<{ list: CategoryItem[] }>()
</script>

<style scoped lang="scss">
.scroll-view {
  display: flex;
  width: 100%;
  overflow-x: scroll;
  flex-direction: row;

  .category {
    height: 200rpx;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    position: relative;

    .text {
      display: block;
      padding-top: 5rpx;
      color: #ed90ab;
      margin-top: 15rpx;
      font-size: 35rpx;
    }

    .category-item {
      display: flex;
      position: relative;

      flex-direction: column;
      flex: 0 0 auto;
      width: 125rpx;
      height: 100%;
      justify-content: center;
      align-content: center;
      text-align: center;

      .imageItem {
        display: block;
        width: 80rpx;
        height: 75rpx;
        border-radius: 50%;
        background-color: #f9d1da;
        margin: 0 auto;
        box-shadow: 2rpx 2rpx 2rpx 2rpx #ececec;

        .image {
          position: relative;
          top: 13rpx;
          width: 62%;
          height: 67%;
        }
      }
    }
  }
}
</style>
